<template>
  <div>
    <div class="table-wrap">
      <div class="row">
        <div class="column cell cell1">字段</div>
        <div class="column cell cell2">是否变更</div>
        <div class="column cell cell3">变更前值</div>
        <div class="column cell cell4">变更后值</div>
        <div class="column cell cell5">变更原因</div>
      </div>
      <ShopRow v-for="row in rows" :key="row.fieldCode" :disabled="disabled" :row="row" :relevance-row="relevanceRows[relevanceMap[row.fieldCode]]" :child-render="renderMap[row.fieldCode]" :editable="editable" />
    </div>
  </div>

</template>
<script>
function genRow(fieldCode, fieldName) {
  return {
    afterValue: '',	// 变更后值
    beforeValue: '',	// 变更前值
    changeCode: '',	// 变更单号
    code: '',	// 门店编码
    fieldCode,	// 字段编码
    fieldName,	// 字段名称
    id: '',	// ID
    isChange: '',	// 是否变更
    name: '' // 门店名称
  }
}
import ShopRow from './ShopRow'
export default {
  name: 'ChangeShop',
  components: {
    ShopRow
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    customerCode: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    shopData: {
      type: Object,
      default: () => ({})
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      rows: {},
      relevanceMap: {
        shopClassify: 'shopClassifyName',
        cityLevel: 'cityLevelName',
        marketLevelCode: 'marketLevelName'
      },
      relevanceRows: {},
      renderMap: {
        shopClassify: (h, row, relevanceRow) => {
          return h('c-common-search-mdm', {
            props: {
              value: row.afterValue,
              label: relevanceRow.afterValue,
              placeholder: '请选择',
              custDocCode: 'QY028',
              disabled: ![1, '1'].includes(row.isChange) || this.disabled,
              excludes: [row.beforeValue]
            },
            on: {
              input: v => {
                this.$set(row, 'afterValue', v)
              },
              'update:label': v => {
                this.$set(relevanceRow, 'afterValue', v)
              }
            }
          })
        },
        shopAddr: (h, row, relevanceRow) => {
          return h('el-input', {
            props: {
              value: row.afterValue,
              type: 'textarea',
              autosize: { minRows: 1 },
              placeholder: '请输入',
              maxlength: 255,
              disabled: ![1, '1'].includes(row.isChange) || this.disabled
            },
            attrs: {
              maxlength: 255
            },
            on: {
              input: v => {
                this.$set(row, 'afterValue', v)
              }
            }
          })
        },
        cityLevel: (h, row, relevanceRow) => {
          return h('c-dict-select', {
            props: {
              value: row.afterValue,
              label: relevanceRow.afterValue,
              placeholder: '请选择',
              dictTypeCode: 'CITY_LEVEL',
              disabled: ![1, '1'].includes(row.isChange) || this.disabled,
              exclude: [row.beforeValue]
            },
            on: {
              input: v => {
                this.$set(row, 'afterValue', v)
              },
              'update:label': v => {
                this.$set(relevanceRow, 'afterValue', v)
              }
            }
          })
        },
        marketLevelCode: (h, row, relevanceRow) => {
          return h('c-dict-select', {
            props: {
              value: row.afterValue,
              label: relevanceRow.afterValue,
              placeholder: '请选择',
              dictTypeCode: 'MARKET_LEVEL',
              disabled: ![1, '1'].includes(row.isChange) || this.disabled,
              exclude: [row.beforeValue]
            },
            on: {
              input: v => {
                this.$set(row, 'afterValue', v)
              },
              'update:label': v => {
                this.$set(relevanceRow, 'afterValue', v)
              }
            }
          })
        }
      }
    }
  },
  computed: {
    shopChangeData() {
      return [
        ...Object.values(this.rows),
        ...Object.values(this.relevanceRows)
      ]
    }
  },
  watch: {
    data: {
      handler(v) {
        this.genRows()
      },
      immediate: true
    },
    shopData: {
      handler(v) {
        if (!v || Object.keys(v || {}).length <= 0) {
          this.clearRows(true)
        } else {
          this.$nextTick(() => {
            this.setRows()
          })
        }
      },
      immediate: true
    },
    shopChangeData: {
      handler(v) {
        this.$emit('input', v)
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    this.genRows()
  },
  methods: {
    genRows() {
      this.rows = {
        shopClassify: genRow('shopClassify', '门店类型'),
        shopAddr: genRow('shopAddr', '详细地址'),
        cityLevel: genRow('cityLevel', '城市级别'),
        marketLevelCode: genRow('marketLevelCode', '市场层级')
      }
      this.relevanceRows = {
        shopClassifyName: genRow('shopClassifyName', '门店类型名称'),
        cityLevelName: genRow('cityLevelName', '城市级别名称'),
        marketLevelName: genRow('marketLevelName', '市场层级名称')
      }
      // 设置数据
      for (let item of this.data) {
        item = JSON.parse(JSON.stringify(item))
        const { fieldCode } = item
        if (this.rows.hasOwnProperty(fieldCode)) {
          this.rows[fieldCode] = item
        }
        if (this.relevanceRows.hasOwnProperty(fieldCode)) {
          this.relevanceRows[fieldCode] = item
        }
      }
    },
    clearRows(all = true) {
      Object.values({ ...this.rows, ...this.relevanceRows }).forEach(v => {
        if (all) {
          'afterValue beforeValue code isChange name'.split(' ').forEach(k => {
            if (k === 'isChange') {
              this.$set(v, k, 0)
            } else {
              this.$set(v, k, '')
            }
          })
        } else {
          this.$set(v, 'afterValue', '')
        }
      })
    },
    setRows() {
      Object.values({ ...this.rows, ...this.relevanceRows }).forEach(v => {
        this.$set(v, 'code', this.shopData.code)
        this.$set(v, 'name', this.shopData.name)
        this.$set(v, 'beforeValue', this.shopData[v.fieldCode])
      })
    },
    validate() {
      const rows = Object.values(this.rows)
      if (rows.every(e => ![1, '1'].includes(e.isChange))) {
        this.$message.warning(`门店基本信息没有变更!`)
        return Promise.reject(false)
      }
      for (const item of rows) {
        if ([1, '1'].includes(item.isChange)) {
          if (!item.afterValue) {
            this.$message.warning(`请输入(选择)【${item.fieldName}】变更后的值!`)
            return Promise.reject(false)
          }
          if (item.fieldCode === 'cityLevel' && (item.reason === '' || item.reason === undefined)) {
            this.$message.warning(`请输入【${item.fieldName}】变更原因!`)
            return Promise.reject(false)
          }
        }
      }
      return Promise.resolve(true)
    }
  }
}
</script>
<style lang="scss" scoped>
.table-wrap{
  .row{
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    border: 1px solid #dcdfe6;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    .column{
      }
      .cell{
        display: flex;
        align-items: center;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
      }
      .cell1{
        width: 20%;
        flex: 0 0 20%;
      }
      .cell2{
        width: 20%;
        flex: 0 0 20%;
      }
      .cell3{
        width: 20%;
        flex: 0 0 20%;
      }
      .cell4{
        max-width: 20%;
        flex: 0 0 20%;
        overflow: hidden;
      }
      .cell5{
        max-width: 20%;
        flex: 0 0 20%;
        overflow: hidden;
      }
      .cell+.cell{
        border-left: 1px solid #dcdfe6;
      }
  }
  .row+.row{
    border-top-color: transparent;
    border-top-width: 0;
  }
  &>div:first-of-type{
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
  }
  &>div:last-of-type{
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}

</style>
